<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>基础信息</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-form label-width="200px" v-if="dataInfo">
        <el-row>
          <el-form-item label="货品编号:">
            <span>{{ dataInfo.serverCode }}</span>
          </el-form-item>
          <el-form-item label="货品图片:">
            <div class="img-video">
              <template title="点击可预览" v-for="item in dataInfo.businessServerImages">
                <el-image fit="cover" v-if="item.type == 1" :src="item.url" alt="" :preview-src-list="images"></el-image>
                <video v-else="item.type==2" :src="item.url" controls>
                  <h2>我们很抱歉，您的浏览器<strong>不支持video标签</strong></h2>
                  <a href="https://www.google.cn/chrome/">点击这里下载浏览器</a>
                </video>
              </template>
            </div>
          </el-form-item>
          <el-form-item label="货品类别">
            <span v-if="dataInfo.serverType==2">套餐产品</span>
            <span v-else-if="dataInfo.serverType==3">计时产品</span>
            <span v-if="dataInfo.serverType==4">时段产品</span>
            <span v-else-if="dataInfo.serverType==10">补贴产品</span>
            <span v-else-if="dataInfo.serverType==15">补差价产品</span>
            <span v-else>普通产品</span>
          </el-form-item>
          <el-form-item label="货品分类:">
            <span>{{ dataInfo.serverClassifyName }}-{{ dataInfo.thirdClassifyName }}</span>
          </el-form-item>
          <el-form-item label="部门:">
            <span>{{ departNames }}</span>
          </el-form-item>
          <el-form-item label="规格:">
            <span>{{ dataInfo.variantState == 1 ? '单品' : '多规格' }}</span>
          </el-form-item>
          <el-form-item label="多规格单项展示方式:">
            <span>{{ dataInfo.specDisplayType == 1 ? '页面展示' : '默认' }}</span>
          </el-form-item>
          <el-form-item label="商户确认方式:">
            <span>{{ $Filters.formatBusinessConfirmWay(dataInfo.businessConfirmWay) }}</span>
          </el-form-item>
          <el-form-item label="是否空包产品:">
            <span>{{ dataInfo.huskFlag == 1 ? '是' : '否' }}</span>
          </el-form-item>

          <el-form-item label="货品名称:">
            <span>{{ dataInfo.name }}</span>
          </el-form-item>
          <el-form-item label="货品简介:">
            <span>{{ dataInfo.introduce }}</span>
          </el-form-item>
          <el-form-item label="押金:" v-if="dataInfo.deposit">
            <span>{{ dataInfo.deposit }}</span>
          </el-form-item>
          <el-form-item label="起步价:" v-if="dataInfo.startFee">
            <span>{{ dataInfo.startFee }}</span>
          </el-form-item>
          <el-form-item label="上门/到店/远程/紧急通知">
            <div>
              <el-tag size="mini" effect="dark" v-if="dataInfo.visitFlag == 1">
                上门
              </el-tag>
              <el-tag size="mini" effect="dark" v-if="dataInfo.shopFlag == 1" type="success">
                到店
              </el-tag>
              <div></div>
              <el-tag size="mini" effect="dark" v-if="dataInfo.remoteFlag == 1" type="warning">
                远程
              </el-tag>
              <el-tag size="mini" effect="dark" v-if="dataInfo.fastFlag == 1" type="danger">
                急
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="商户:">
            <span>{{ dataInfo.businessName }}</span>
          </el-form-item>
          <el-form-item label="总库存">
            <span>{{ dataInfo.stock }}</span>
          </el-form-item>
          <el-form-item label="平台原价:">
            <span>{{ dataInfo.price }}</span>
          </el-form-item>
          <el-form-item label="平台售价:">
            <span>{{ dataInfo.salePrice }}</span>
          </el-form-item>
          <el-form-item label="商户原价:">
            <span>{{ dataInfo.marketPrice }}</span>
          </el-form-item>
          <el-form-item label="商户折扣比例:">
            <span>{{ dataInfo.discount }}%</span>
          </el-form-item>
          <el-form-item label="成本价:">
            <span>{{ dataInfo.costPrice }}</span>
          </el-form-item>
          <el-form-item label="包装费:">
            <span>{{ dataInfo.packageFee }}</span>
          </el-form-item>
          <el-form-item label="包装费计算方式:">
            <span >{{ dataInfo.packageFlag == 1 ? '独立包装费' : '合并包装费' }}</span>
          </el-form-item>
          <el-form-item label="是否需配送费:">
            <span >{{ dataInfo.deliveryFlag == 0 ? '否' : '是' }}</span>
          </el-form-item>
          <!--<el-form-item label="配送费:">
            <span>{{dataInfo.deliveryFee}}</span>
          </el-form-item>-->
          <el-form-item label="商户折扣比例:">
            <span>{{ dataInfo.discount ? dataInfo.discount + "%" : "" }}</span>
          </el-form-item>
          <el-form-item label="商户分类:">
            <span class="business-classify_name" v-html="businessClassifies"></span>
          </el-form-item>

          <el-form-item label="是否对接:">
            <span>{{ dataInfo.dockingFlag==2?"是":"否" }}</span>
          </el-form-item>
          <el-form-item label="对接类型:">
            <span>{{ $Filters.formatDockingType(dataInfo.dockingType)}}</span>
          </el-form-item>
          <el-form-item label="关联医生:" v-show="dataInfo.dockingType==1">
            <span>{{ dataInfo.doctorName }}</span>
          </el-form-item>
          <el-form-item label="项目编码:" v-show="dataInfo.dockingType==2">
            <span>{{ dataInfo.itemCode }}</span>
          </el-form-item>
          <el-form-item label="项目名称:" v-show="dataInfo.dockingType==2">
            <span>{{ dataInfo.itemName }}</span>
          </el-form-item>
          <!--<el-form-item label="货品排序:">
            <span>{{dataInfo.sort == 999 ? "" : dataInfo.sort }}</span>
          </el-form-item>-->
          <el-form-item label="备注:">
            <span>{{ dataInfo.remark }}</span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>

        </el-row>
      </el-form>
      <div class="tit">
        <h2>货品描述</h2>
      </div>
      <RichEditor :readonly="true" :richText="dataInfo.describes"></RichEditor>
      <div class="tit">
        <h2>变体信息</h2>
      </div>
      <el-table border :data="businessServerVariants" style="width:max-content;">
        <el-table-column type="index" label="序号" align="center" width="80px">
        </el-table-column>
        <el-table-column label="服务主图" align="center" width="150px">
          <template slot-scope="scope">
            <div>
              <el-image style="width: 100px;height: 100px;" fit="cover" :src="scope.row.mainImg" alt="点击可放大查看"
                :preview-src-list="[scope.row.mainImg]"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="服务图片" align="center" width="250px">
          <template slot-scope="scope">
            <div v-if="scope.row.moreImg">
              <el-image v-for="(item,index) in scope.row.moreImg" :key="index" style="width: 100px;height: 100px;margin:0 5px 5px 0;" fit="cover" :src="item" alt="点击可放大查看"
                :preview-src-list="[scope.row.moreImg]"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="specStr" label="规格" align="center" width="150px">
        </el-table-column>
        <el-table-column v-if="dataInfo.serverType==4"  label="服务员" align="center" width="150px">
          <template slot-scope="{row}">
            <div>
              {{ getWairterNames(row) }}
            </div>
            <el-button type="primary" plain size="mini" @click="checkWaiterTime(row)">查看工作时间</el-button>
          </template>
        </el-table-column>
        <el-table-column  label="时长" align="center" v-if="dataInfo.serverType==3">
            <template slot-scope="scope">
              <div>
                {{ scope.row.rentTime }}
                <span v-if="scope.row.rentUnit==1">分钟</span>
                <span v-else-if="scope.row.rentUnit==2">小时</span>
                <span v-else>天</span>
              </div>
            </template>
        </el-table-column>
        <el-table-column label="是否计时" align="center" width="100px" v-if="dataInfo.serverType==3">
          <template slot-scope="scope">
            <div>
              {{ scope.row.rentFlag?'是':'否' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="续费时长" align="center" width="100" v-if="dataInfo.serverType==3">
          <template slot-scope="scope">
            <span v-if="!scope.row.rentFlag">{{ scope.row.renewTime+formatTimeUnit(scope.row.renewUnit) }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="续费价格" align="center" width="100" v-if="dataInfo.serverType==3">
          <template slot-scope="scope">
            <span v-if="!scope.row.rentFlag">{{ scope.row.renewPrice}}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column  label="起步价" align="center" width="100" v-if="dataInfo.serverType==3">
          <template slot-scope="scope">
            <span v-if="scope.row.rentFlag">{{ scope.row.deposit }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column prop="deposit" label="押金" align="center" width="100" v-if="dataInfo.serverType==3">

        </el-table-column>
        <el-table-column prop="price" label="原价" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="salePrice" label="售价" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="costPrice" label="成本价" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="stock" label="库存" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="packageFee" label="包装费" align="center" width="100px">
        </el-table-column>
        <el-table-column prop="packageDiscount" label="包装费折扣比例(%)" align="center" width="130px">
        </el-table-column>
        <el-table-column prop="discount" label="商户折扣比例(%)" align="center" width="120px">
        </el-table-column>
        <el-table-column prop="introduce" label="简介" align="center" width="150px">
        </el-table-column>
        <el-table-column label="是否默认" align="center" width="80px">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.defaultFlag" effect="dark" size="small" type="danger">默认</el-tag>
              <el-tag v-if="!scope.row.defaultFlag" effect="dark" size="small" type="info">否</el-tag>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="tit">
        <h2>可售时间</h2>
      </div>
      <el-table :data="goodsHours" style="width:fit-content;max-width:fit-content;margin-bottom:10px">
          <el-table-column type="index" label="序号" align="center" width="100px">
          </el-table-column>
          <el-table-column prop="beginHours" label="开始时间" align="center" width="200">
          </el-table-column>
          <el-table-column prop="endHours" label="结束时间" align="center" width="200">
          </el-table-column>
          <el-table-column prop="estimateTime" label="最快到达时间" align="center" width="200">
            <template slot-scope="scope">
              {{ scope.row.estimateTime }}{{ formatTimeUnit2(scope.row.timeUnit) }}
            </template>
          </el-table-column>
          <el-table-column prop="deliveryTime" label="可送时间段" align="center" width="200">
          </el-table-column>
          <el-table-column prop="businessRemindTime" label="商户提醒时间(分)" align="center" width="140">
          </el-table-column>
          <el-table-column prop="waiterRemindTime" label="服务员提醒时间(分)" align="center" width="140">
          </el-table-column>
        </el-table>
    </div>

    <el-dialog :visible.sync="waiterTime.show" title="服务员工作时间" center width="fit-content">
      <el-table :data="waiterTime.list">
        <el-table-column type="index" label="序号" width="100"></el-table-column>
        <el-table-column prop="waiterName" label="服务员" width="240" align="center"></el-table-column>
        <el-table-column prop="prepareTime" label="准备时间" width="130" align="center"></el-table-column>
        <el-table-column prop="serviceTime" label="服务时间" align="center" width="130"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import BusinessServerApi from '@/api/goods/businessServer';
import BusinessDepartApi from "@/api/business/depart"
import RichEditor from "../../components/RichEditor.vue";
export default {
  data() {
    return {
      dataInfo: {},
      businessServerVariants: [],
      serverClassifyName: "",
      departList: [],
      departNames: "",
      goodsHours:[],
      waiterTime:{
        show:false,
        list:[]
      }
    };
  },
  components:{
    RichEditor
  },
  computed: {
    images() {
      if (this.dataInfo.businessServerImages) {
        return this.dataInfo.businessServerImages.filter(item => item.type == 1).map(item => item.url)
      } else {
        return []
      }

    },
    businessClassifies(){
      const val = this.dataInfo.businessClassifies||[]
      return val.map(item=>item.name).join("，")
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      BusinessServerApi.getBusinessServerInfo({ id: this.$route.query.id }).then(res => {
        this.dataInfo = res.data
        this.goodsHours = res.data.goodsHours
        this.getDepartList()
        let variants = res.data.businessServerVariants || []
        variants.forEach(a => {
          if (a.variantSpecs) {
            let specs = a.variantSpecs.map(b => {
              return b.specVal
            })
            a.specStr = specs.join(",")
          }
          a.moreImg =a.moreImg?a.moreImg.split(","):""
        })
        this.businessServerVariants = variants
      })
    },
    getDepartList() {
      BusinessDepartApi.listMangerTree().then(res => {
        this.departList = res.data
        this.getDepartNames()
      })
    },
    getDepartNames(){
      let arr = []
      if(this.dataInfo.thirdDepartId){
        arr = this.$Utils.filterTreeToArr(this.departList, { departId: this.dataInfo.thirdDepartId }, 'departId')
      }else if(this.dataInfo.secondDepartId){
        arr = this.$Utils.filterTreeToArr(this.departList, { departId: this.dataInfo.secondDepartId }, 'departId')
      }else if(this.dataInfo.firstDepartId){
        arr = this.$Utils.filterTreeToArr(this.departList, { departId: this.dataInfo.firstDepartId }, 'departId')
      }else if(this.dataInfo.departId){
        arr = this.$Utils.filterTreeToArr(this.departList, { departId: this.dataInfo.departId }, 'departId')
      }
      this.departNames = arr.map(item=>item.departName).join("-")
    },
    getWairterNames(row){
      return row.relationWaiters.map(item=>item.waiterName).join(",")
    },
    checkWaiterTime(row){
      const {waiterTime} = this
      waiterTime.show = true
      waiterTime.list = row.relationWaiters
    },
    formatTimeUnit2(cell){
        if(cell==1){
          return "分钟"
        }else if(cell==2){
          return "时"
        }else{
          return ""
        }
      },
    formatTimeUnit(val){
      if(val==1) return "分钟"
      if(val==2) return "小时"
      if(val==3) return "天"
    },
    returnList() {
      this.$store.dispatch('delView', this.$route);
      this.$router.push({ path: '/goods/businessServerManagement' })
    }
  },

}

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
<style lang="scss" scoped>
.img-video {
  width: 550px;
  display: flex;
  flex-wrap: wrap;

  .el-image {
    width: 150px;
    height: 150px;
    vertical-align: bottom;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }

  video {
    width: 150px;
    height: 150px;
    margin: 0 20px 20px 0;
    flex-shrink: 0;
  }
}
.business-classify_name{
    ::v-deep p{
      display: inline;
      margin: 0;
       img{
        vertical-align: middle;
        height: 16px;
        width: auto;
      }
    }
  }
</style>
